<template>
    <div class="container">
    <div>
      <div>
        <el-tabs v-model="activeName">
      <el-tab-pane label="MDM企业客户信息表单" name="first">
        <el-form ref="dataForm" :model="record" :rules="recordRules" label-position="top" size="small"  label-width="110px">
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="供应商编码" prop="customerCode">
                <el-input v-model="record.customerCode" placeholder="企业客户编码" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="公司名称" prop="companyName">
                <el-input v-model="record.companyName" placeholder="公司名称" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="公司简称" prop="companyAbbreviation">
                <el-input v-model="record.companyAbbreviation" placeholder="公司简称"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="联系电话" prop="telephone">
                <el-input v-model="record.telephone" placeholder="联系电话" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="纳税人识别号" prop="taxpayerIdentificationNum">
                <el-input v-model="record.taxpayerIdentificationNum" placeholder="纳税人识别号"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="开户行及账号" prop="bankandaccount">
                <el-input v-model="record.bankandaccount" placeholder="开户行及账号"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
        </el-tabs>
      </div>
      <div class="menu-navbar">
        <el-button size="small" type="success" @click="createSave('dataForm')">保存</el-button>
        <el-button size="small" type="success" @click="closeSelf()">关闭</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import {
  Select,Update
} from '@/api/basicInfo/MdmBusinessCustomer'
import moment from  'moment'
 export default {
      name: 'mdmBusinessCustomerDetail',
      props: ['openType', 'formId'],
      data() {
      return {
        activeName: 'first',
        filedata: {
          busiType: "loan",
          docUse: "1",
          busiPrimaryKey: this.formId
        },
        curUserId: this.$store.state.user.userid,
        curUserName: this.$store.state.user.name,
        curOrgId: this.$store.state.user.orgId,
        record: {
          mdmBusinessCustomerId: '',
          title: 'MDM企业客户信息',
          customerCode: '',
          companyName: '',
          companyAbbreviation: '',
          telephone: '',
          taxpayerIdentificationNum: '',
          bankandaccount: ''
        },
        recordRules: {
          userId: [
            { message: '标题不能为空', required: true, trigger: 'blur' },
            { min: 1, max: 256, message: '最大长度为 256 个字符', trigger: 'blur' }
          ]
        }
      }
    },
    created() {
      this.initPage()
    },
    // watch: {
    //   initPage() { // 普通的watch监听通的watch监听
    //   //this.initPage()
    //   }
    // },
    methods: {
      initPage() {
        if (this.openType === 'edit') {
          this.fetchData()
        }else if (this.openType === 'detail'){
            getUUID().then(res => {
              console.log(res.data.data)
              this.record.mdmBusinessCustomerId = res.data.data;
              //this.filedata.busiPrimaryKey=this.record.sysLeaveInfoId
          });
        }
      },
      fetchData() {
        let queryArgs = {
            condition: {
            mdmBusinessCustomerId: {
              property: 'mdmBusinessCustomerId',
              value: '',
              type: 'EQ'
            }
          },
        }
        if (this.formId) {
          queryArgs.condition.mdmBusinessCustomerId.value = this.formId
        }
        Select(queryArgs).then(res => {
          this.loading = false
          this.record = res.data.data.records[0]
        }).catch((err) => {
          console.log(err)
        })
      },
      createSave(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.saveRecord()
        } else {
          this.$message({
            type: 'danger',
            message: '添加失败!'
          })
          console.log('error submit!!')
          return false
        }
      })
    },
    saveRecord(type) {
          // 更新
          Update(this.record).then(res => {
            this.$message({
              type: 'success',
              message: '保存成功!'
            })
            this.record = res.data.data
          }).catch((err) => {
            console.log(err)
          })
      },
      closeSelf() {
      this.$emit('changeCloseDialog')
    },
    }
 }
</script>
<style scoped>
  .menu-navbar{
    padding:0 0 20px;
    text-align: right;
  }
  .container{
    padding: 0 10px;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }
</style>